<template>
  <view class="">
    <view class="list" v-if="pageData.list.length">
      <div
        class="item"
        @click="
          $utils.toUrl(
            '/service-home/rob-order/order-detail?order_id=' + order.id
          )
        "
        v-for="(order, i) in pageData.list"
        :key="i"
      >
        <div class="flex-y-center u-font-26 item_1">
          <div class="flex-w-1 u-line-1">{{ order.su_name }}</div>
          <div class="color-999">
            {{ $utils.turnDate(order.created_at * 1000) }}下单
          </div>
          <div class="icon-shu"></div>
          <div class="price-color">
            {{ typeText(order.status_ext, order.ignore) }}
          </div>
        </div>

        <div class="item_2">
          <div
            v-for="goods in order.goods_list"
            :key="goods.goods_id"
            class="goods flex"
          >
            <image :src="goods.pic" class="goods-img" mode="aspectFill"></image>
            <div class="flex-w-1">
              <div class="font-w-600 flex-y-center u-m-b-14">
                <div class="goods-name flex-w-1 u-line-1 u-m-r-20">
                  {{ goods.goods_name }}
                </div>
                <div class="goods-price">
                  <text class="u-font-22">¥</text>
                  <text>{{ goods.total_price }}</text>
                </div>
              </div>

              <div class="flex-y-center">
                <div class="flex-w-1">
                  <div class="desc">{{ goods.worker_goods_ext_desc }}</div>
                </div>
                <div class="goods-num price-color font-w-600">
                  x{{ goods.num }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item_3 u-m-t-10 flex-x-end">
          <div class="u-m-r-20" style="color: #f0250e">
            <template v-if="order.order_type_ext == '601'"> 定金 </template>
            <template v-else-if="order.order_type_ext == '602'"
              >尾款</template
            >
            <template v-else-if="order.order_type_ext == '603'"
              >加钟</template
            >
            <template v-else>全款</template>
          </div>
          <div class="color-999 flex-w-1 flex-x-end">
            <div>
              共
              <text class="font-w-600 price-color"> {{ order.num }} </text>
              件
              <text class="u-m-l-20"></text>
              实收：
              <text class="font-w-600 price-color">
                ¥{{ order.pay_price }}
              </text>
              （出行¥{{ order.express_price }}）
            </div>
          </div>
        </div>

        <div @click.stop class="item_4 u-font-26 u-m-t-16">
          <div>
            <text class="iconfont icon-calculator u-m-r-10"></text>
            <text class="">订单编号</text>
            <text
              @click="copyText(order.order_no)"
              class="color-999 u-m-r-20 u-m-l-10"
              >{{ order.order_no }}</text
            >
            <text
              @click="copyText(order.order_no)"
              class="iconfont icon-copy color-999"
            ></text>
          </div>

          <div class="flex u-m-t-20">
            <div class="left flex-w-1 u-m-r-20 flex">
              <text class="iconfont icon-a-map u-m-r-10"> </text>
              <div @click="copyText(order.address)" class="flex-w-1">
                {{ order.address }}
              </div>
            </div>
            <div class="right color-999">
              <!-- <text class="iconfont icon-arrow-right"></text> -->
              <text
                @click="copyText(order.address)"
                class="iconfont icon-copy"
              ></text>
            </div>
          </div>
        </div>

        <!-- 订单按钮 -->
        <StatusButton
          :order="order"
          @onQiangdan="onQiangdan"
          @onStatus="onStatus"
        ></StatusButton>
      </div>

      <u-loadmore :status="pageData.loadmoreStatus"></u-loadmore>
    </view>

    <div v-else>
      <u-empty mode="data"></u-empty>
    </div>
  </view>
</template>

<script>
import { orderBind, orderStatus as orderStatusApi } from "@/api/service-home";
const orderStatus = require("../static/json/order-status.json");
import StatusButton from "@/service-home/components/status-button";

export default {
  props: {
    pageData: {
      type: Object,
      default: () => {
        return { list: [], loadmoreStatus: "loadmore" };
      },
    },
    loadmoreStatus: {
      type: Object,
    },
  },
  components: {
    StatusButton,
  },
  computed: {
    typeText() {
      return function (type, ignore) {
        if (ignore) return "已忽略";
        return orderStatus[type];
      };
    },
  },

  methods: {
    copyText(text) {
      uni.setClipboardData({
        data: text,
        success: (result) => {
          this.$utils.toast("复制成功");
        },
      });
    },

    async onQiangdan(order, type) {
      await orderBind({ order_id: order.id, type }, true);
      this.$emit("loadData", true);
    },
    async onStatus(order, type) {
      await orderStatusApi({ type, order_id: order.id });
      this.$emit("loadData", true);
    },
  },
};
</script>

<style lang="scss" scoped>
.price-color {
  color: #f0250e;
}

.list {
  padding: 24rpx;
  .item {
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 24rpx;
    padding: 24rpx;
    .item_1 {
      .icon-shu {
        width: 1px;
        height: 20rpx;
        background: #f2f2f2;
        margin: 0 10rpx;
      }
    }
    &_2 {
      .goods {
        margin-top: 24rpx;
        .goods-img {
          width: 140rpx;
          height: 140rpx;
          border-radius: 10rpx;
          background: #f2f2f2;
          margin-right: 20rpx;
        }

        .desc {
          font-size: 24rpx;
          display: inline-block;
          background: #f2f2f2;
          padding: 4rpx 12rpx;
          border-radius: 6rpx;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    &_4 {
      background: #f2f2f2;
      border-radius: 20rpx;
      padding: 24rpx;
    }
  }
}
</style>
